<template>
    <div class="app-container">
        <el-table v-loading="loading" border :data="getActivitiesDetails">
            <el-table-column label="套餐类型" width="100">
                <template slot-scope="scope">
                <span>{{ scope.row.packageName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="推广文案" width="300">
                <template slot-scope="scope">
                <span>{{ scope.row.pushText }}</span>
                </template>
            </el-table-column>
            <el-table-column label="价格" width="100">
                <template slot-scope="scope">
                <span>{{ scope.row.price }}</span>
                </template>
            </el-table-column>
            <el-table-column label="超值标签" width="100">
                <template slot-scope="scope">
                <span>{{ scope.row.superValue==1 ?  '超值' : '-'}}</span>
                </template>
            </el-table-column>
            <el-table-column label="套餐状态" width="100">
                <template slot-scope="scope">
                <span>{{ scope.row.packageStatue == 0 ? '开启' : '关闭' }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作人" width="150">
                <template slot-scope="scope">
                <span>{{ scope.row.updateBy }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作时间" width="200" prop="num">
                <template slot-scope="scope">
                <span>{{ scope.row.updateTime }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="188" class-name="small-padding fixed-width">
                <template slot-scope="scope">
                <el-button
                    size="mini"
                    type="text"
                    @click="handleUpdate(scope.row)"
                    v-hasPermi="['reviewActivities:activities:edit']"
                >修改</el-button>
                <el-button
                    v-if="scope.row.packageStatue == 1"
                    size="mini"
                    type="text"
                    @click="onAndOff(scope.row)"
                    v-hasPermi="['reviewActivities:activities:remove']"
                >开启</el-button>
                <el-button
                    v-if="scope.row.packageStatue == 0"
                    size="mini"
                    type="text"
                    @click="onAndOff(scope.row)"
                    v-hasPermi="['reviewActivities:activities:remove']"
                >关闭</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改的弹窗 -->
        <el-dialog :close-on-click-modal="false" title="会员套餐修改" :visible.sync="openFather" width="700px" append-to-body>
            <el-form ref="formFather" :model="formFather" label-width="100px">
                <el-row>
                <el-col :span="7">
                    <el-form-item label="套餐类型" prop="locationType">
                        <el-input v-model="formFather.packageName" disabled/>
                    </el-form-item>
                </el-col>
                <el-col :span="5">
                    <el-form-item class="form-border">
                            <el-input v-model="formFather.price" class="input-border"/>元
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="套餐标签" prop="comId">
                        <el-radio-group v-model="formFather.superValue">
                            <el-radio :label='0'>无</el-radio>
                            <el-radio :label="1">超值</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="18">
                    <el-form-item label="推广文案" prop="pushText">
                        <el-input v-model="formFather.pushText" clearable/>
                    </el-form-item>
                </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updatePrice">确 定</el-button>
                <el-button @click="cancels">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { getMembershipCard, timestampToTime, updateMembershipCard } from "@/api/reviewActivities/activitiesCombo";
export default {
    data() {
        return {
            loading: false,
            getActivitiesDetails: [
            //     {
            //     combo: '月卡',
            //     text: '多开一单就血赚！',
            //     price: '49元',
            //     handleMan: '旺老师',
            //     time: '2020/02/12 12:00',
            //     status: 1,
            // }, {
            //     combo: '季卡',
            //     text: '多开一单就血赚！',
            //     price: '139元',
            //     handleMan: '旺老师',
            //     time: '2020/02/12 12:00',
            //     status: 1,
            // }, {
            //     combo: '半年卡',
            //     text: '多开一单就血赚！',
            //     price: '269元',
            //     handleMan: '旺老师',
            //     time: '2020/02/12 12:00',
            //     status: 2,
            //     tag: '超值',
            // }, {
            //     combo: '年卡',
            //     text: '多开一单就血赚！',
            //     price: '499元',
            //     handleMan: '旺老师',
            //     time: '2020/02/12 12:00',
            //     status: 2,
            //     tag: '超值',
            // }
            ],
            openFather: false,
            formFather:{
                packageName:'',
                price: '',
                superValue: 0,
                pushText: '',
                id: '',
                packageStatue: '0',
            },
        }
    },
    created(){
        this.getList();
    },
    methods: {
        handleUpdate(row){
            this.openFather=true;
            this.formFather.packageName=row.packageName;
            this.formFather.price=row.price;
            this.formFather.superValue=(row.superValue==0?0:1);
            this.formFather.pushText=row.pushText;
            this.formFather.id=row.id;
            this.formFather.packageStatue=row.packageStatue;
        },
        updatePrice(){
            updateMembershipCard(this.formFather).then(res => {
                this.cancels();
                this.getList();
            })
        },
        // 开启或关闭
        onAndOff(row){
            this.formFather.price=row.price;
            this.formFather.superValue=(row.superValue==0?0:1);
            this.formFather.pushText=row.pushText;
            this.formFather.id=row.id;
            this.formFather.packageStatue=(row.packageStatue==0?1:0);
            this.updatePrice();
        },
        cancels(){
            this.openFather = false;
        },
        getList(){
            console.log(this.timestampToTime(1602496848477))
            getMembershipCard().then(
                response => {
                    let getActivitiesDetails = response.data.content;
                    getActivitiesDetails.map(v => {
                        v.updateTime = this.timestampToTime(v.updateTime)
                    })
                    this.getActivitiesDetails = getActivitiesDetails;
                }
            );
        },
                //时间戳转年月日时分
        timestampToTime(timestamp) {
            var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
            var h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';
            var m = (date.getMinutes() < 10 ? '0'+date.getMinutes() : date.getMinutes());
            // var s = (date.getSeconds() < 10 ? '0'+date.getSeconds() : date.getSeconds());
            let strDate = Y+M+D+h+m;
            return strDate;
        }
    },
}
</script>
<style lang="scss">
    // .app-main{
    //     padding: 20px;
    // }
    .input-border>input {
        border: none;
    }
    .form-border .el-form-item__content {
        margin-left: 20px !important;
        display: flex;
        border: 1px solid #dfe4ed;
        padding: 0 15px;
        border-radius: 5px;
    }
</style>